<template>
  <view class="mine-container">
    <!-- 顶部用户信息卡片（匹配登录页form-group风格） -->
    <view class="user-card">
      <view class="avatar-wrapper">
        <image 
          class="user-avatar" 
          :src="userInfo.avatar || '/static/neiko.jpeg'" 
          mode="widthFix"
        ></image>
        <text class="edit-avatar" @tap="chooseAvatar">更换头像</text>
      </view>
      
      <view class="user-info">
        <text class="username">{{ userInfo.username || '游客' }}</text>
        <text class="user-desc">账号：{{ userInfo.token ? userInfo.token.slice(0, 8) + '****' : '未登录' }}</text>
        <text class="login-tip" v-if="!userInfo.token" @tap="toLogin">点击登录</text>
      </view>
    </view>

    <!-- 功能模块（匹配登录页按钮风格） -->
    <view class="func-group">
      <view class="func-item" @tap="toCollect">
        <image class="func-icon" src="/static/collect.png" mode="widthFix"></image>
        <text class="func-text">我的收藏</text>
        <image class="func-arrow" src="/static/arrow.png" mode="widthFix"></image>
      </view>
      
      <view class="func-item" @tap="toHistory">
        <image class="func-icon" src="/static/history.png" mode="widthFix"></image>
        <text class="func-text">浏览历史</text>
        <image class="func-arrow" src="/static/arrow.png" mode="widthFix"></image>
      </view>
      
      <view class="func-item" @tap="toSetting">
        <image class="func-icon" src="/static/setting.png" mode="widthFix"></image>
        <text class="func-text">账号设置</text>
        <image class="func-arrow" src="/static/arrow.png" mode="widthFix"></image>
      </view>
      
      <view class="func-item" @tap="logout" v-if="userInfo.token">
        <image class="func-icon" src="/static/logout.png" mode="widthFix"></image>
        <text class="func-text logout-text">退出登录</text>
        <image class="func-arrow" src="/static/arrow.png" mode="widthFix"></image>
      </view>
    </view>

    <!-- 收藏新闻列表（登录后展示） -->
    <view class="collect-title" v-if="userInfo.token">
      <text>我的收藏</text>
      <text class="more" @tap="toCollect">更多</text>
    </view>
    <view class="collect-list" v-if="userInfo.token">
      <view class="news-item" v-for="(item, idx) in collectNews" :key="idx">
        <text class="news-title">{{ item.title }}</text>
        <text class="news-time">{{ item.time }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {}, // 登录用户信息
      collectNews: [ // 示例收藏数据
        { title: '党的二十届四中全会闭幕，释放多项民生利好政策', time: '2025.10.26' },
        { title: '全球首个陆上商用小型模块化反应堆并网发电', time: '2025.10.24' }
      ]
    }
  },
  onShow() {
    // 获取本地存储的用户信息
    this.userInfo = uni.getStorageSync('userInfo') || {};
    // 未登录时提示（或直接跳转登录页）
    if (!this.userInfo.token) {
      uni.showToast({ title: '请先登录', icon: 'none' });
    }
  },
  methods: {
    // 跳转登录页
    toLogin() {
      uni.navigateTo({ url: '/pages/login/login' });
    },
    // 退出登录
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('userInfo');
            this.userInfo = {};
            uni.setTabBarItem({ index: 3, text: '未登录' });
            uni.showToast({ title: '已退出登录', icon: 'success' });
          }
        }
      });
    },
    // 功能跳转
    toCollect() { uni.navigateTo({ url: '/pages/collect/collect' }); },
    toHistory() { uni.navigateTo({ url: '/pages/history/history' }); },
    toSetting() { uni.navigateTo({ url: '/pages/setting/setting' }); },
    // 更换头像（示例）
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 实际项目中上传图片后更新头像
          this.userInfo.avatar = res.tempFilePaths[0];
          uni.setStorageSync('userInfo', this.userInfo);
        }
      });
    }
  }
}
</script>

<style scoped>
/* 全局背景匹配登录页 */
.mine-container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 用户信息卡片：匹配登录页form-group样式 */
.user-card {
  background-color: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.avatar-wrapper {
  position: relative;
  margin-right: 30rpx;
}

/* 用户头像：匹配登录页logo样式 */
.user-avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  box-shadow: 0 4rpx 10rpx rgba(255, 107, 107, 0.3);
  background-color: #ffeeee;
}

.edit-avatar {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 24rpx;
  color: #4fc3f7;
  background-color: #fff;
  padding: 10rpx 15rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 5rpx rgba(0,0,0,0.1);
}

.user-info {
  flex: 1;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.user-desc {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
}

.login-tip {
  font-size: 28rpx;
  color: #ff6b6b;
  display: block;
}

/* 功能模块：匹配登录页按钮风格 */
.func-group {
  background-color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  margin-bottom: 30rpx;
}

.func-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #eee;
}

.func-item:last-child {
  border-bottom: none;
}

.func-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.func-text {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

.logout-text {
  color: #ff6b6b;
}

.func-arrow {
  width: 24rpx;
  height: 24rpx;
}

/* 收藏列表样式 */
.collect-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.collect-title text:first-child {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.more {
  font-size: 28rpx;
  color: #4fc3f7;
}

.collect-list {
  background-color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.news-item {
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
}

.news-item:last-child {
  border-bottom: none;
}

.news-title {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.news-time {
  font-size: 24rpx;
  color: #999;
}
</style>